<template>
  <div class="avatar-wrapper">
    <div class="avatar">
      {{ capitalName }}
    </div>
    <Tag class="tag" color="blue">{{ username }}</Tag>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {getPrincipalInStore} from "../common/js/auth";

  export default {

    created() {
      let principal = getPrincipalInStore();
      if (principal) {
        this.$store.commit('changeIsLogin', true);
        this.$store.commit('setUsername', principal.username);
      }
    },

    name: 'Avatar',
    computed: {
      ...mapState(['username']),
      capitalName() {
        return this.username && this.username.substring(0, 1).toUpperCase()
      }
    },
    data() {
      return {
      }
    },
  }
</script>

<style lang="stylus" scoped>
  @import '../common/stylus/variables.styl';
  .avatar-wrapper
    margin 30px
    position relative
    height 80px
    .avatar
      background-color $mask-color
      width 40px
      height 40px
      border-radius 50%
      text-align center
      line-height 40px
      font-weight 700
      color black
    .tag
      margin-top 10px
      position absolute
      left 50%
      transform translateX(-50%)
</style>
